<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="个人作品集网站 - 展示我的项目、技能和经验">
    <meta name="keywords" content="作品集, 个人网站, 项目展示, 技能">
    <meta name="author" content="Your Name">
    <title data-i18n="title">个人作品集</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="i18n.js"></script>
    <script src="theme-switcher.js"></script>
</head>
<body class="dark-theme">
    <header>
        <nav>
            <ul>
                <li><a href="#home" data-i18n="nav-home">首页</a></li>
                <li><a href="#about" data-i18n="nav-about">关于我</a></li>
                <li><a href="#projects" data-i18n="nav-projects">项目</a></li>
                <li><a href="#contact" data-i18n="nav-contact">联系方式</a></li>
            </ul>
            <div class="nav-controls">
                <div class="language-switcher">
                    <button data-lang="zh-CN" class="active">中文</button>
                    <button data-lang="en">EN</button>
                </div>
            </div>
        </nav>
        <div class="hero">
            <h1 data-i18n="hero-title">欢迎来到我的作品集</h1>
            <p data-i18n="hero-subtitle">展示我的创意项目和技术技能</p>
            <a href="#projects" class="cta-button" data-i18n="hero-button">查看项目</a>
        </div>
    </header>

    <main>
        <section id="about">
            <h2 class="section-title" data-i18n="about-title">关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://kirineko.github.io/hita.png" alt="个人照片" class="profile-image">
                </div>
                <div class="about-text">
                    <h3 data-i18n="about-role">Python Developer</h3>
                    <p data-i18n="about-description">擅长消息中间件、实时数据处理、高可用架构设计。喜欢Rust、幸运星、孤独摇滚、摇曳露营。</p>
                    
                    <div class="skills-tags">
                        <span class="skill-tag skill-primary" data-i18n="skill-python">Python</span>
                        <span class="skill-tag skill-primary" data-i18n="skill-mongodb">MongoDB</span>
                        <span class="skill-tag skill-secondary" data-i18n="skill-nextjs">Next.js</span>
                        <span class="skill-tag skill-secondary" data-i18n="skill-elasticsearch">ElasticSearch</span>
                        <span class="skill-tag skill-tertiary" data-i18n="skill-rust">Rust</span>
                    </div>
                    
                    <div class="timeline">
                        <h3 data-i18n="experience-title">专业经历</h3>
                        <div class="timeline-item">
                            <div class="timeline-year">2010-2014</div>
                            <div class="timeline-content">
                                <h4 data-i18n="education-tsinghua">清华大学</h4>
                                <p data-i18n="education-bachelor">本科</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-year">2014-2016</div>
                            <div class="timeline-content">
                                <h4 data-i18n="education-stanford">斯坦福大学</h4>
                                <p data-i18n="education-master">硕士</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-year">2017-2020</div>
                            <div class="timeline-content">
                                <h4 data-i18n="work-google">Google</h4>
                                <p data-i18n="work-position">软件工程师</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-year">2021-2023</div>
                            <div class="timeline-content">
                                <h4 data-i18n="work-openai">OpenAI</h4>
                                <p data-i18n="work-position">软件工程师</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="achievements">
                        <h3 data-i18n="achievements-title">个人成就</h3>
                        <ul>
                            <li data-i18n="achievement-1">清华大学优秀毕业生</li>
                            <li data-i18n="achievement-2">微软MVP</li>
                            <li data-i18n="achievement-3">华为开发者认证</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects">
            <h2 data-i18n="projects-title">我的项目</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <img src="images/project1.jpg" alt="项目1" class="project-image">
                    <h3 data-i18n="project-name">项目名称 1</h3>
                    <p data-i18n="project-description">项目描述和主要功能特点。</p>
                    <a href="#" class="project-link" data-i18n="project-link">查看详情</a>
                </div>
                <div class="project-card">
                    <img src="images/project2.jpg" alt="项目2" class="project-image">
                    <h3 data-i18n="project-name">项目名称 2</h3>
                    <p data-i18n="project-description">项目描述和主要功能特点。</p>
                    <a href="#" class="project-link" data-i18n="project-link">查看详情</a>
                </div>
                <div class="project-card">
                    <img src="images/project3.jpg" alt="项目3" class="project-image">
                    <h3 data-i18n="project-name">项目名称 3</h3>
                    <p data-i18n="project-description">项目描述和主要功能特点。</p>
                    <a href="#" class="project-link" data-i18n="project-link">查看详情</a>
                </div>
            </div>
        </section>

        <section id="skills">
            <h2 data-i18n="skills-title">技能专长</h2>
            <div class="skills-container">
                <div class="skill-item">
                    <h3 data-i18n="skill-frontend">前端开发</h3>
                    <div class="skill-bar">
                        <div class="skill-level" data-level="90%"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <h3 data-i18n="skill-backend">后端开发</h3>
                    <div class="skill-bar">
                        <div class="skill-level" data-level="80%"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <h3 data-i18n="skill-database">数据库设计</h3>
                    <div class="skill-bar">
                        <div class="skill-level" data-level="75%"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <h3 data-i18n="skill-uiux">UI/UX 设计</h3>
                    <div class="skill-bar">
                        <div class="skill-level" data-level="85%"></div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact">
            <h2 class="section-title" data-i18n="contact-title">联系我</h2>
            <div class="contact-content">
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name" data-i18n="contact-name">姓名</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email" data-i18n="contact-email">邮箱</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="message" data-i18n="contact-message">留言</label>
                            <textarea id="message" name="message" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="submit-button" data-i18n="contact-send">发送消息</button>
                    </form>
                </div>
                <div class="contact-info">
                    <h3 data-i18n="contact-info-title">联系方式</h3>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <div class="contact-details">
                            <h4 data-i18n="contact-personal-website">个人网页</h4>
                            <a href="https://kirineko.github.io" target="_blank">kirineko.github.io</a>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-details">
                            <h4 data-i18n="contact-email-title">邮箱</h4>
                            <a href="mailto:2589671988@qq.com">2589671988@qq.com</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 <span data-i18n="footer-copyright">个人作品集. 保留所有权利.</span></p>
        <div class="social-links">
            <a href="#" aria-label="GitHub" data-i18n="social-github">GitHub</a>
            <a href="#" aria-label="LinkedIn" data-i18n="social-linkedin">LinkedIn</a>
            <a href="#" aria-label="Twitter" data-i18n="social-twitter">Twitter</a>
        </div>
    </footer>

    <script src="main.js"></script>
    <script src="i18n.js"></script>
</body>
</html>
